<div class="cd-col-form">
  <form #frm="ngForm"
        [formGroup]="userForm"
        novalidate>
    <div class="card">
      <div i18n="form title"
           class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>

      <div class="card-body">
        <!-- Old password -->
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 for="oldpassword"
                 i18n>Old password</label>
          <div class="cd-col-form-input">
            <div class="input-group">
              <input class="form-control"
                     type="password"
                     placeholder="Old password..."
                     id="oldpassword"
                     formControlName="oldpassword"
                     autocomplete="new-password"
                     autofocus>
              <span class="input-group-append">
                <button class="btn btn-light"
                        cdPasswordButton="oldpassword">
                </button>
              </span>
            </div>
            <span class="invalid-feedback"
                  *ngIf="userForm.showError('oldpassword', frm, 'required')"
                  i18n>This field is required.</span>
            <span class="invalid-feedback"
                  *ngIf="userForm.showError('oldpassword', frm, 'notmatch')"
                  i18n>The old and new passwords must be different.</span>
          </div>
        </div>

        <!-- New password -->
        <div class="form-group row">
          <label class="cd-col-form-label"
                 for="newpassword">
            <span class="required"
                  i18n>New password</span>
            <cd-helper *ngIf="passwordPolicyHelpText.length > 0"
                       class="text-pre-wrap"
                       html="{{ passwordPolicyHelpText }}">
            </cd-helper>
          </label>
          <div class="cd-col-form-input">
            <div class="input-group">
              <input class="form-control"
                     type="password"
                     placeholder="Password..."
                     id="newpassword"
                     autocomplete="new-password"
                     formControlName="newpassword">
              <span class="input-group-append">
                <button type="button"
                        class="btn btn-light"
                        cdPasswordButton="newpassword">
                </button>
              </span>
            </div>
            <div class="password-strength-level">
              <div class="{{ passwordStrengthLevelClass }}"
                   data-toggle="tooltip"
                   title="{{ passwordValuation }}">
              </div>
            </div>
            <span class="invalid-feedback"
                  *ngIf="userForm.showError('newpassword', frm, 'required')"
                  i18n>This field is required.</span>
            <span class="invalid-feedback"
                  *ngIf="userForm.showError('newpassword', frm, 'notmatch')"
                  i18n>The old and new passwords must be different.</span>
            <span class="invalid-feedback"
                  *ngIf="userForm.showError('newpassword', frm, 'passwordPolicy')">
              {{ passwordValuation }}
            </span>
          </div>
        </div>

        <!-- Confirm new password -->
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 for="confirmnewpassword"
                 i18n>Confirm new password</label>
          <div class="cd-col-form-input">
            <div class="input-group">
              <input class="form-control"
                     type="password"
                     autocomplete="new-password"
                     placeholder="Confirm new password..."
                     id="confirmnewpassword"
                     formControlName="confirmnewpassword">
              <span class="input-group-append">
                <button class="btn btn-light"
                        cdPasswordButton="confirmnewpassword">
                </button>
              </span>
            </div>
            <span class="invalid-feedback"
                  *ngIf="userForm.showError('confirmnewpassword', frm, 'required')"
                  i18n>This field is required.</span>
            <span class="invalid-feedback"
                  *ngIf="userForm.showError('confirmnewpassword', frm, 'match')"
                  i18n>Password confirmation doesn't match the new password.</span>
          </div>
        </div>
      </div>

      <div class="card-footer">
        <cd-form-button-panel (submitActionEvent)="onSubmit()"
                              [form]="userForm"
                              [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
                              wrappingClass="text-right"></cd-form-button-panel>
      </div>
    </div>
  </form>
</div>
